<template>
	<view class="my-store-info">
		<view class="head-plate">
			<view class="head-plate-into">
				<view class="my-equip">
					<view class="my-text">我的设备</view>
					<view class="my-number">{{equipTotalNum}}
						<view class="tag">台</view>
					</view>
				</view>
				<view class="option-btn-box">
					<view class="btn-p" @click="toTransfer">转设备</view>
					<view class="btn-p" @click="toRecovery">设备回收</view>
					<view class="btn-p" @click="toRecord">转设备记录</view>
				</view>
				<view class="equip-number">
					<view class="equip-number-item">喇叭{{hornNum}}台</view>
					<view class="equip-number-item">盒子机{{BoxNum}}台</view>
				</view>
			</view>
		</view>
		<view class="nav-plate">
			<view class="nav-plate-left">
				<view class="nav-item" v-for="(item,index) in navList" :key="index" :class="{'active':cur==index}"
					@click="tabNav(index)">{{item.text}}</view>
			</view>
			<view class="nav-plate-right" @click="openSearch">设备筛选<u-icon name="search"></u-icon></view>
		</view>
		<view class="list">
			<view class="li-item" v-for="(item,index) in equipList" :key="index">
				<view class="li-item-model">
					<view class="item-child name">{{item.deviceName}}</view>
					<view class="item-child no-activation" v-if="item.deviceActivateStatus==1">
						<view class="btn-active" @click="toActive(item)">激活</view>
					</view>
					<view class="item-child Active" v-if="item.deviceActivateStatus==2">已激活</view>
				</view>
				<view class="li-item-model">
					<view class="item-child label">设备编号：</view>
					<view class="item-child">{{item.deviceNumber}}</view>
				</view>


			</view>

		</view>
		<u-popup :show="showSearch" @close="closeSearch" @open="openSearch" mode="right">
			<view class="search-model">
				<view class="model">
					<view class="model-title">
						品牌
					</view>
					<view class="model-list">
						<view class="dd" v-for="(item,index) in brandList" :class="{'brand-cur':brandCur==index}" @click="selectBrand(item,index)">
                            {{item.name}}
						</view>

					</view>
				</view>
				<view class="model">
					<view class="model-title">
						激活状态
					</view>
					<view class="model-list">
						<view class="dd" :class="{'active-cur':activeCur==index}" v-for="(item,index) in activationStatusList" :key="index" @click="selectActive(item,index)">
							{{item.name}}
						</view>

					</view>
				</view>
				<view class="model">
					<view class="model-title">
						绑定状态
					</view>
					<view class="model-list">
						<view class="dd" :class="{'bind-cur':bindCur==index}" v-for="(item,index) in BindStatusList" :key="index" @click="selectBind(item,index)">
							{{item.name}}
						</view>

					</view>
				</view>
				<view class="model">
					<view class="model-list">
						<u--input
						    placeholder="请输入设备编号"
						    v-model="searchModel.deviceNumber"
						   
						  ></u--input>
					</view>
				</view>
				<view class="sure-search" @click="searchList">确定</view>
			</view>
		</u-popup>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	const app = getApp();
	const globalData = app.globalData;
	const apiUrl = globalData.wxApi;
	const wxImg = globalData.wxImg;
	import {
		getStoreData,
		dealNum,
		httpPost,
		httpGet,
		bdMapToTxMap,
		txMapToBdMap,
	} from "@/utils/http.js";
	import mpMixin from "@/uni_modules/uview-ui/libs/mixin/mpMixin";
	const pic1 = require(`@/img/my/my1.png`);



	export default {
		data() {
			return {
				wxImg,
				apiUrl,
				dealNum,
				pic1,
				value: "",
				userInfo: {},
				indexList: [],
				navList: [{
					text: "喇叭"
				}, {
					text: "盒子机"
				}],
				cur: 0,
				params: {
					deviceActivateStatus: "",
					deviceBindStatus: "",
					deviceModel: "",
					deviceNumber: "",
					deviceType: ""
				},
				hornNum: 0,
				BoxNum: 0,
				equipTotalNum: 0,
				searchModel: {
					deviceType: null, //1喇叭，2盒子机
					pageNo: 1,
					pageSize: 10,
					deviceActivateStatus:null,
					deviceBindStatus:null,
					deviceNumber:"",
					deviceModel:null
				},
				equipList: [],
				status: "loadmore",
				pageTotal: 1,
				pageCount: 0,
				activationStatusList: [{
					name: "未激活",
					status: 1,
					selected:false
				}, {
					name: "已激活",
					status: 2,
					selected:false
				}],
				BindStatusList: [{
					name: "未绑定",
					status: 3,
					selected:false
				}, {
					name: "已绑定",
					status: 4,
					selected:false
				}],
				showSearch: false,
				bindCur:null,
				activeCur:null,
				brandList:[],
				type:1,
				brandCur:null
				

			};
		},

		onShow() {

		},
		onUnload() {

		},
		onLoad(options) {
			this.getBrandList();
			this.getMyEquipTotal();
			this.getEquipList();
		},
		onPullDownRefresh() {
			this.getMyEquipTotal();
			this.cur = 0;
			this.searchModel.deviceType = 1;
			this.equipList = [];
			this.searchModel.pageNo = 1;
			this.pageCount = 0;
			this.getEquipList();
		},
		onReachBottom() {
			if (this.pageCount >= 10) {
				this.status = 'loading';
				this.searchModel.pageNo++
				this.getEquipList();
			} else {
				this.status = 'nomore'
			}

		},
		methods: {
			getBrandList(){
				let that = this;
				httpGet("/api/iotmerchantsdevice/deviceModelList/"+this.type)
					.then((res) => {
						uni.stopPullDownRefresh();
						if (res.code == 0) {
						  that.brandList=res.data;
						}
					})
					.catch((e) => {});
			},
			getMyEquipTotal() {
				let that = this;
				httpPost("/api/iotmerchantsdevice/myDeviceStatics", this.params)
					.then((res) => {
						uni.stopPullDownRefresh();
						if (res.code == 0) {
							that.hornNum = res.data.deviceTypeCountList[0].counts;
							that.BoxNum = res.data.deviceTypeCountList[1].counts;
							that.equipTotalNum = res.data.totalCounts;
							
						}
					})
					.catch((e) => {});
			},
			tabNav(index) {
				this.cur = index;
				if (index == 0) {
					this.searchModel.deviceType = 1;
					this.type=1;
				}
				if (index == 1) {
					this.searchModel.deviceType = 2;
					this.type=2;
				}
				this.equipList = [];
				this.searchModel.pageNo = 1;
				this.getEquipList();
				this.getBrandList();
			},
			getEquipList() {
				let that = this;
				httpPost("/api/iotmerchantsdevice/myDeviceListNew", this.searchModel)
					.then((res) => {
						console.log(res)
						uni.stopPullDownRefresh();
						if (res.code == 0) {
							this.equipList = [...res.data.list, ...this.equipList];
							this.pageCount = res.data.list.length;
							if (this.pageCount >= 10) {
								this.status = 'loading';
							} else {
								this.status = 'nomore';
							}

						}
					})
					.catch((e) => {});
			},
			toRecovery() {
				uni.navigateTo({
					url: "/pages/equipmentManagement/deviceRecovery"
				});
			},
			toActive(data) {
				uni.navigateTo({
					url: "/pages/equipmentManagement/activateDevice?deviceNumber=" + data.deviceNumber
				});
			},
			toTransfer() {
				uni.navigateTo({
					url: "/pages/equipmentManagement/transferDevice"
				});
			},
			toRecord() {
				uni.navigateTo({
					url: "/pages/equipmentManagement/transferRecord"
				});
			},
			closeSearch() {
				this.showSearch = false;
				this.bindCur=null;
				this.activeCur=null;
			},
			openSearch() {
				this.showSearch = true;
			},
			selectActive(data,index){
				this.activeCur=index;
				this.searchModel.deviceActivateStatus=data.status;
			},
			selectBind(data,index){
				this.bindCur=index;
				this.searchModel.deviceBindStatus=data.status;
			},
			searchList(){
				this.getEquipList();
			},
			selectBrand(data,index){
				this.brandCur=index;
				this.searchModel.deviceModel=data.id;
			}

		},
	};
</script>

<style lang="scss">
	.my-store-info {
		background-color: #f5f6f6;
		height: 100vh;
	}


	/deep/ .u-cell__title-text {
		font-size: 28rpx;
	}

	.head-plate {
		background: linear-gradient(to bottom, #329ffc, #fff);
		padding-top: 30rpx;
		padding-bottom: 30rpx;

		.head-plate-into {
			margin-left: 30rpx;
			margin-right: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx;

			.option-btn-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.btn-p {
					padding: 10rpx 20rpx;
					color: #fff;
					font-size: 24rpx;
					border-radius: 10rpx;
				}

				.btn-p:nth-child(1) {
					background-color: #fe6906;
				}

				.btn-p:nth-child(2) {
					background-color: #2adae9;
				}

				.btn-p:nth-child(3) {
					background-color: #20ae48;
				}
			}
		}

		.my-equip {
			.my-text {
				font-size: 32rpx;
				text-align: center;
			}

			.my-number {
				font-size: 70rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				margin-top: 10rpx;
				margin-bottom: 10rpx;

				.tag {
					font-size: 32rpx;
					padding-top: 36rpx;
				}
			}
		}

		.equip-number {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			font-size: 28rpx;
			border-top: 2rpx solid #eee;
			margin-top: 20rpx;
			padding-top: 20rpx;

			.equip-number-item {
				margin-right: 40rpx;
			}
		}
	}

	.nav-plate {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;

		.nav-plate-left {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;

			.nav-item {
				padding-bottom: 6rpx;
				border-bottom: 4rpx solid #fff;
				margin-right: 20rpx;
			}

			.active {
				border-bottom: 4rpx solid #329ffc;
				color: #329ffc;
			}
		}

		.nav-plate-right {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;

		}
	}

	.list {
		padding-left: 30rpx;
		padding-right: 30rpx;

		.li-item {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 2rpx solid #eee;
			background-color: #fff;
			border-radius: 10rpx;

			.Active {
				text-align: right;
				line-height: 60rpx;
			}

			.li-item-model {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					line-height: 60rpx;
				}

				.label {
					color: #ababab;
				}

				.no-activation {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
				}

				.item-child {
					width: 50%;

					.btn-active {
						width: 90rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						border-radius: 10rpx;
						background-color: #52bff8;
						color: #fff;
						font-size: 24rpx;
					}
				}
			}

			.li-item-model:nth-child(2) {
				margin-top: 20rpx;

				.item-child:nth-child(2) {
					text-align: right;
				}
			}
		}
	}
	.search-model{
		padding: 40rpx 30rpx;
		width: 400rpx;
		.sure-search{
			height: 50rpx;
			line-height: 50rpx;
			background-color: #329ffc;
			color: #fff;
			text-align: center;
			border-radius: 10rpx;
			
		}
		.model{
			margin-bottom: 20rpx;
			.model-title{
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}
			.model-list{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				flex-wrap: wrap;
				.dd{
					padding: 8rpx 15rpx;
					border: #ababab 2rpx solid;
					margin-left: 20rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					margin-bottom: 10rpx;
				}
				.active-cur{
					background-color: #fe6906;
					color: #fff;
					border: #fe6906 2rpx solid;
				}
				.bind-cur{
					background-color: #fe6906;
					color: #fff;
					border: #fe6906 2rpx solid;
				}
				.brand-cur{
					background-color: #fe6906;
					color: #fff;
					border: #fe6906 2rpx solid;
				}
			}
		}
	}
</style>